<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>学生信息管理</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        table { border-collapse: collapse; width: 100%; }
        th, td { border: 1px solid #ddd; padding: 8px; text-align: center; }
        th { background-color: #f2f2f2; }
        input, button { padding: 5px; margin: 5px 0; }
    </style>
</head>
<body>

<h2>学生信息管理系统</h2>

<!-- 添加学生 -->
<h3>添加学生</h3>
<form id="addForm">
    学号：<input type="text" id="id" required><br>
    姓名：<input type="text" id="name" required><br>
    生日：<input type="date" id="birthDate" required><br>
    <button type="submit">提交</button>
</form>


<!-- 查询单个学生 -->
<h3>查询学生</h3>
<input type="text" id="queryId" placeholder="输入学号">
<button onclick="getStudent()">查询</button>

<!-- 显示查询结果 -->
<h3>学生信息</h3>
<div id="studentInfo"></div>

<!-- 显示所有学生 -->
<h3>所有学生列表</h3>
<table id="studentsTable">
    <thead>
    <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>生日</th>
    </tr>
    </thead>
    <tbody></tbody>
</table>

<script>
    const baseUrl = "http://localhost:8080/students";

    // 获取所有学生并展示
    function getAllStudents() {
        fetch(baseUrl)
            .then(res => res.json())
            .then(data => {
                const tbody = document.querySelector("#studentsTable tbody");
                tbody.innerHTML = "";
                data.forEach(student => {
                    const row = document.createElement("tr");
                    row.innerHTML = `
                        <td>${student.id}</td>
                        <td>${student.name}</td>
                        <td>${student.birthDate}</td>
                    `;
                    tbody.appendChild(row);
                });
            })
            .catch(err => console.error(err));
    }

    // 添加学生
    document.getElementById("addForm").addEventListener("submit", function (e) {
        e.preventDefault();
        const student = {
            id: document.getElementById("id").value,
            name: document.getElementById("name").value,
            birthDate: document.getElementById("birthDate").value
        };

        fetch(baseUrl, {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify(student)
        })
            .then(res => res.text())
            .then(msg => {
                alert(msg);
                getAllStudents();
            })
            .catch(err => alert("添加失败：" + err.message));
    });

    // 查询单个学生
    function getStudent() {
        const id = document.getElementById("queryId").value;
        fetch(`${baseUrl}/${id}`)
            .then(res => {
                if (!res.ok) return Promise.reject("未找到该学生");
                return res.json();
            })
            .then(student => {
                document.getElementById("studentInfo").innerHTML = `
                    <p>学号：${student.id}</p>
                    <p>姓名：${student.name}</p>
                    <p>生日：${student.birthDate}</p>
                `;
            })
            .catch(err => {
                document.getElementById("studentInfo").innerHTML = `<p style="color:red;">${err}</p>`;
            });
    }

    // 页面加载时获取所有学生
    window.onload = getAllStudents;
</script>

</body>
</html>
